<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		.menu{
			width: 100%;
			height: 40px;
			margin-top: 150px;
			background: #01204F url() 0 0 no-repeat;
		}
		.mid{
			width: 1000px;
			height: 40px;
			margin:0 auto;
			position: relative;
		}
		.list{
			width: 100%;
			height: 40px;
			position: absolute;
			top: 0px;
		}
		.fisrt{
			background: #CC0000 url() 0 0 no-repeat;
		}
		.list li{
			font-size: 16px;
			font-weight: 800;
			color: #fff;
			float: left;
			line-height: 40px;
			padding:0px 15px;
			cursor: pointer;
		}
		.run{
			width: 50px;
			height: 40px;
			background: #CC0000 url() 0 0 no-repeat;
			position: absolute;
			top: 0px;
			left: 0px;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			
			$('.list li').hover(function() {

				width = $(this).width()+30;

				left = $(this).position().left;

				$('.run').stop().animate({width:width+"px",left:left+'px'}, 100);

			}, function() {
				$('.run').stop().animate({width:"50px",left:'0px'},400);
			});
		})
	</script>
</head>
<body>
	<div class="menu">
		<div class="mid">
			<div class="run"></div>
			<div class="list">
				<li class="fisrt">首页</li>
				<li>百家号</li>
				<li>国内</li>
				<li>国际</li>
				<li>互联网</li>
				<li>财经</li>
				<li>个性推荐</li>
			</div>
			

		</div>
	</div>
</body>
</html>